
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:useBean id="userBean" scope="session" class="bean.UserBean"></jsp:useBean>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
        <head>
            <title>3ataba shopping</title>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
            <link rel="shortcut icon" href="css/images/favicon.ico" />
            <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
            <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
            <script type="text/javascript" src="js/jquery.cookie.js"></script>
            <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
            <!--[if IE 6]>
                    <script type="text/javascript" src="js/png-fix.js"></script>
            <![endif]-->
            <script type="text/javascript" src="js/functions.js"></script>
            <script>

                $(document).ready(function() {
                    $("#historyview").hide();
                    var email = $("#email").val();
                    var password = $("#password").val();
                    var data = {email: email,
                        password: password
                    };
                    $.post("ServletSignIn", data, function(data, status, request) {
                        if (status == "success") {
                            if (data === "Sorry User Not active") {
                                // alert("Sorry User Not active");
                                window.location.href = "index.jsp";
                            } else if (data === "Wrong User data, please try again") {
                                //  alert("Wrong User data, please try again");
                                window.location.href = "index.jsp";
                            } else {

                                loadCartInfo();
                                $("#guest").hide();
                                $("#logged-in").show();
                            }
                        }
                    });
                    data = {
                    };
                    $("#history").click(function() {
                        $.post("ServletViewHistory1", data, function(data, status, request) {
                            if (status == "success") {
                                document.getElementById("tabhist").innerHTML = data;
                                $("#historyview").show();
                            }
                        });

                    });
                    $("#edit").click(function() {
                        var fname = $("#fname");
                        var lname = $("#lname");
                        var uname = $("#uname");

                        var email = $("#email");
                        var password = $("#password");
                        var cpassword = $("#cpassword");

                        var address = $("#address");
                        var birthdate = $("#birthdate");
                        var mobile = $("#mobile");

                        var cbalance = $("#cbalance");

                        fname.prop('disabled', false);
                        lname.prop('disabled', false);
                        uname.prop('disabled', false);

                        email.prop('disabled', false);
                        password.prop('disabled', false);
                        birthdate.prop('disabled', false);

                        mobile.prop('disabled', false);
                        cbalance.prop('disabled', false);
                        cpassword.prop('disabled', false);

                        address.prop('disabled', false);
                        $("#updatebtn").prop('disabled', false);

                    });
                });

                function loadCartInfo() {
                    var total = "0", count = "0";

                    var data = {id: $.cookie("id")};
                    //total
                    $.post("ServletCartInfo", data, function(data, status, request) {
                        if (status == "success") {
                            total = data;
                            $.get("ServletCartInfo", data, function(data, status, request) {
                                if (status == "success") {
                                    count = data;
                                    //alert(  );
                                    document.getElementById("logged-in").innerHTML = '<p>Welcome, <a id="user">' + $.cookie("username") + '</a> .</p>'

                                            + '<p>'
                                            + '<a class="cart" >'
                                            + '<img src="css/images/cart-icon.png" alt="" />'
                                            + '</a>'
                                            + 'Shopping Cart (' + count + ')'
                                            + '<a id="total" class="sum">'
                                            + ' ' + total + 'L.E'
                                            + '</a>'
                                            + '</p>';

                                }
                            });

                        } else {
                            document.getElementById("logged-in").innerHTML = '<p>Welcome, <a id="user">' + $.cookie("username") + '</a> .</p>'
                                    + '<p>'
                                    + '<a class="cart" >'
                                    + '<img src="css/images/cart-icon.png" alt="" />'
                                    + '</a>'
                                    + 'Shopping Cart (' + count + ')'
                                    + '<a id="total" class="sum">'
                                    + '' + total + 'L.E'
                                    + '</a>'
                                    + '</p>';
                        }
                    });
                    //count

                }

                function runFn() {
                    $('.field, textarea').focus(function() {
                        if (this.title === this.value) {
                            this.value = '';
                        }
                    }).blur(function() {
                        if (this.value === '') {
                            this.value = this.title;
                        }
                    });
                }

            </script>
        </head>
        <body>
            <!-- Header -->

            <div id="header" class="shell">
                <div id="logo">
                    <h1>
                        <a href="#">3ataba shopping</a>
                    </h1>
                </div>
                <!-- Navigation -->
                <div id="navigation">
                    <ul>
                        <li><a href="index.jsp" >Home</a></li>
                        <li><a class="active" >Profile</a></li>
                    </ul>
                </div>
                <!-- End Navigation -->
                <div class="cl">&nbsp;</div>
                <!-- Login-details -->
                <div id="login-details">
                    <div id="logged-in">

                    </div>
                </div>
                <!-- End Login-details -->
            </div>
            <!-- End Header -->

            <!-- Main -->
            <div id="main" class="shell">
                <div id="content" class="profile">
                    <input type="button" id="history"  value="History"  class="submit-btn" />
                    <label>First name</label><br/>
                    <input type="text" id="fname" disabled="" class="field" value="<jsp:getProperty name="userBean" property="fname"/>"  />
                <br/><br/>
                <div id="historyview">
                    <table id="tabhist" border="3px">

                    </table>
                </div>
                <label>Last name</label><br/>
                <input type="text" id="lname" disabled=""  class="field" value="<jsp:getProperty name="userBean" property="lname"/>" />
                <br/><br/>
                <label>Username</label><br/>
                <input type="text" id="uname" disabled="" class="field" value=" <jsp:getProperty name="userBean" property="username"/>"  />
                <br/><br/>
                <label>Email</label><br/>
                <input type="email" id="email" disabled="" class="field" value="<jsp:getProperty name="userBean" property="email"/>" />
                <br/><br/>
                <label>Address</label><br/>
                <input type="text" id="address" disabled="" class="field" value="<jsp:getProperty name="userBean" property="address"/>"  />
                <br/><br/>
                <label>Password</label><br/>
                <input type="password" id="password" disabled=""  class="field" value="<jsp:getProperty name="userBean" property="password"/>" />
                <br/><br/>
                <label>Confirm password</label><br/>
                <input type="password" id="cpassword" disabled="" class="field" value="<jsp:getProperty name="userBean" property="password"/>" />
                <br/><br/>
                <label>Birth Date</label><br/>
                <input type="date" id="birthdate" disabled="" class="field" value="<jsp:getProperty name="userBean" property="birthdate"/>"  />
                <br/><br/>
                <label>Mobile</label><br/>
                <input type="tel" id="mobile" disabled="" class="field" value="<jsp:getProperty name="userBean" property="mobile"/>"  />
                <br/><br/>
                <label>Credit balance</label><br/>
                <input type="number" id="cbalance" disabled="" class="field" value="<jsp:getProperty name="userBean" property="credit"/>"  />
                <br/><br/><br/>
                <input type="button" id="updatebtn" disabled="" value="Update"  class="submit-btn update" />
                <input type="button" id="edit"  value="Edit"  class="submit-btn" />

            </div>

            <!-- End Content -->
            <div class="cl">&nbsp;</div>
        </div>
        <!-- End Main -->
        <script>
            $(document).ready(function() {
                var fname = $("#fname");
                var lname = $("#lname");
                var uname = $("#uname");
                var email = $("#email");
                var password = $("#password");
                var cpassword = $("#cpassword");
                var address = $("#address");
                var birthdate = $("#birthdate");
                var mobile = $("#mobile");
                var cbalance = $("#cbalance");

                fname.blur(validatefName);
                lname.blur(validatelName);
                uname.blur(validateuName);
                email.blur(validateEmail);
                password.blur(validatePass1);
                cpassword.blur(validatePass2);
                address.blur(validateaddress);
                birthdate.blur(validatebirthdate);
                mobile.blur(validatenumber);
                cbalance.blur(validatecbalance);
                //On key press
                fname.keyup(validatefName);
                lname.keyup(validatelName);
                uname.keyup(validateuName);
                email.keyup(validateEmail);
                password.keyup(validatePass1);
                cpassword.keyup(validatePass2);
                address.keyup(validateaddress);
                birthdate.keyup(validatebirthdate);
                mobile.keyup(validatenumber);
                cbalance.keyup(validatecbalance);



                $("#updatebtn").click(function() {

                    if (validatefName() & validatelName() & validateuName() & validateEmail() & validatePass1() & validatePass2()
                            & validateaddress() & validatebirthdate() & validatenumber() & validatecbalance()) {
                        var data = {
                            fname: $("#fname").val(),
                            lname: $("#lname").val(),
                            uname: $("#uname").val(),
                            email: $("#email").val(),
                            password: $("#password").val(),
                            address: $("#address").val(),
                            birthdate: $("#birthdate").val(),
                            mobile: $("#mobile").val(),
                            balance: $("#cbalance").val()
                        }
                        $.post("ServletEditProfile", data, function(data, status, request) {
                            if (status == "success") {
//                                if (data === "done") {
//                                    window.location.assign("index.jsp");
//                                } else {
                                alert(data);
//                                }

                            }
                        });
                    }

                });

                //validation functions
                function validateEmail() {
                    //testing regular expression
                    var a = $("#email").val();
                    var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
                    //if it's valid email
                    if (filter.test(a)) {
                        email.removeClass("error");
                        return true;
                    }
                    //if it's NOT valid
                    else {
                        email.addClass("error");
                        return false;
                    }
                }
                function validatefName() {
                    //if it's NOT valid
                    if (fname.val().length < 4) {
                        fname.addClass("error");
                        return false;
                    }
                    //if it's valid
                    else {
                        fname.removeClass("error");
                        return true;
                    }
                }
                function validatelName() {
                    //if it's NOT valid
                    if (lname.val().length < 4) {
                        lname.addClass("error");
                        return false;
                    }
                    //if it's valid
                    else {
                        lname.removeClass("error");
                        return true;
                    }
                }
                function validateuName() {
                    //if it's NOT valid
                    if (uname.val().length < 4) {
                        uname.addClass("error");
                        return false;
                    }
                    //if it's valid
                    else {
                        uname.removeClass("error");
                        return true;
                    }
                }
                function validatePass1() {


                    //it's NOT valid
                    if (password.val().length < 5) {
                        password.addClass("error");
                        return false;
                    }
                    //it's valid
                    else {
                        password.removeClass("error");
                        validatePass2();
                        return true;
                    }
                }
                function validatePass2() {

                    //are NOT valid
                    if (password.val() != cpassword.val()) {
                        cpassword.addClass("error");
                        return false;
                    }
                    //are valid
                    else {
                        cpassword.removeClass("error");
                        return true;
                    }
                }
                function validateaddress() {
                    //it's NOT valid
                    if (address.val().length < 4) {
                        address.addClass("error");
                        return false;
                    }
                    //it's valid
                    else {
                        address.removeClass("error");
                        return true;
                    }
                }
                function validatebirthdate() {
                    //it's NOT valid
                    if (birthdate.val().length < 4) {
                        birthdate.addClass("error");
                        return false;
                    }
                    //it's valid
                    else {
                        birthdate.removeClass("error");
                        return true;
                    }
                }
                function validatecbalance() {
                    //it's NOT valid
                    if (cbalance.val().length < 4) {
                        cbalance.addClass("error");
                        return false;
                    }
                    //it's valid
                    else {
                        cbalance.removeClass("error");
                        return true;
                    }
                }
                function validatenumber() {
                    //it's NOT valid
                    if (mobile.val().length < 4 || mobile.val().length > 11) {
                        mobile.addClass("error");
                        return false;
                    }
                    //it's valid
                    else {
                        mobile.removeClass("error");
                        return true;
                    }
                }

            });
        </script>
    </body>
</html>